<template>
  <div id="app">
    <el-container style="height: 100vh">
      <el-header>
        <el-row style="margin-top:10px">
          <el-col :span="20">
            <span>网吧后台管理系统</span>
            <span style="color:red" v-if="role==1">{{h+':'+m+':'+s}}</span>
          </el-col>
          <el-col :span="4">
            <el-dropdown trigger="click">
              <el-avatar :src="require('../assets/5.jpg')"></el-avatar>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item dinpmvided v-if="role==1"><router-link to="/member/UpdatePwd">修改密码</router-link></el-dropdown-item>
                <el-dropdown-item dinpmvided v-if="role==1"><router-link to="/member/Userinfo">个人信息</router-link></el-dropdown-item>
                <el-dropdown-item dinpmvided><router-link to="/">退出</router-link></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
      <el-aside>
        <mall-aside></mall-aside>
      </el-aside>
        <el-main>
          <mall-main></mall-main>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

import MallAside from "./Aside";
import MallMain from "./Main";

export default {
  name: 'Manager',
  components: {MallAside,MallMain},
  data(){
    return {
      h:"",
      m:"",
      s:"",
      role:sessionStorage.getItem("role"),
      name:sessionStorage.getItem("username"),
    }
  },
  created(){
    if(sessionStorage.getItem("role")==1) {
      var OneHour = new Date(new Date().getTime() + 1 * 60 * 60 * 1000);
      this.countTime(OneHour);
    }
  },
  methods:{
    countTime: function(da) {
      // 定义结束时间戳
      const end = Date.parse(new Date(da))
      // 定义当前时间戳
      const now = Date.parse(new Date())
      // 做判断当倒计时结束时都为0
      if (now >= end) {
        this.d = 0
        this.h = 0
        this.m = 0
        this.s = 0
        return
      }
      // 用结束时间减去当前时间获得倒计时时间戳
      const msec = end - now
      let d = parseInt(msec / 1000 / 60 / 60 / 24) //算出天数
      let h = parseInt(msec / 1000 / 60 / 60 % 24)//算出小时数
      let m = parseInt(msec / 1000 / 60 % 60)//算出分钟数
      let s = parseInt(msec / 1000 % 60)//算出秒数
      //给数据赋值
      this.d = d
      this.h = h > 9 ? h : '0' + h
      this.m = m > 9 ? m : '0' + m
      this.s = s > 9 ? s : '0' + s
      if(this.h=="00"&&this.m=="00"&&this.s=="01"){
        var OneHour = new Date(new Date().getTime() + 1 * 60 * 60 * 1000);
        this.countTime(OneHour);
        this.axios.get("/member/selectMoney/10").then((resp)=>{
          if(resp.data){
            this.axios.get("/member/updateMoney?name="+sessionStorage.getItem("username")+"&money=10");
            this.$message.success("扣钱成功！");
          }else{
            this.$message.error("余额不足，请尽快充值");
          }
        });

        return;
      }
      //定义this指向
      const that = this
      // 使用定时器 然后使用递归 让每一次函数能调用自己达到倒计时效果
      setTimeout(function () {
        that.countTime(da)
      }, 1000)
    }
  }
}
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    color: #2c3e50;

  }
  .el-header{
    background-color: #23262E;
    height: 100px;
    font-size: 14px;
  }
  .el-header span{
    margin-left:20px;
    color: #038777;
    font-size: 30px;
  }

  .el-aside{
    background-color: #545c64;
  }

  .el-main{
    background-color: #F5F7FA;
  }
</style>
